<template>
  <div>
    <div v-show="flag">
      <div style="text-align:left;">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="按需查询">
              <el-input placeholder="问卷编号" v-model="quesId" clearable></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input placeholder="问卷名称" v-model="quesName" clearable></el-input>
            </el-form-item>
            <el-select v-model="quesType" placeholder="问卷类型" style="width:300px">
              <el-option label="体质测评" value="1"></el-option>
              <el-option label="心理测评" value="2"></el-option>
              <el-option label="风险评估" value="3"></el-option>
            </el-select>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                <el-button type="success" icon="el-icon-brush" @click="clearCondition">清空条件</el-button>
            </el-form-item>
            <el-button type="primary" round style="float: right" @click="dialogFormVisible = true"><i class="el-icon-circle-plus-outline"></i> 添加问卷</el-button>
        </el-form>
      </div>
      <el-collapse>
        <el-collapse-item title="点击这里，按照类型查看或编辑各种问卷的启用状态" name="1">
          <el-row>
            <el-button style="margin-top:10px" size="mini" round :type="item.type" v-for="(item,index) in rubTypes" :key="index" @click="clickRubType(item.value)">{{item.name}}</el-button>
          </el-row>
        </el-collapse-item>
      </el-collapse>

      <el-table :data="tableData" border style="width: 100%;margin-top:10px">
          <el-table-column fixed prop="quesId" label="问卷编号" width="200"></el-table-column>
          <el-table-column prop="quesName" label="问卷名称" width="300"></el-table-column>
          <el-table-column prop="quesType" label="问卷类型" width="160" :formatter="formatterType"></el-table-column>
          <el-table-column prop="quesTestType" label="测试类型" width="160" :formatter="formatterT"></el-table-column>
          <el-table-column prop="quesScore" label="及格分数" width="100"></el-table-column>
          <el-table-column prop="quesState" label="问卷状态" width="150" :formatter="formatState"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200" fit='true'>
              <template slot-scope="scope">
                  <el-button type="text" @click="watchQues(scope.row)"><i class="el-icon-zoom-in"></i>查看问卷</el-button>
                  <el-button type="text" @click="delQues(scope.row.quesId)"><i class="el-icon-delete"></i>删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 9, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </div>

    <!-- 具体类型显示的div -->
    <div v-show="!flag">
      <el-page-header @back="goBack" :content="rubTypeName + '测评问卷'">
      </el-page-header>

      <!-- 根据类型查，表格显示 -->
      <el-table :data="byTestTypeQuestions" border style="width: 100%;margin-top:20px" max-height="300">
        <el-table-column fixed prop="quesId" label="问卷编号" width="120"></el-table-column>
        <el-table-column prop="quesName" label="问卷名称" width="730"></el-table-column>
        <el-table-column prop="quesState" label="问卷状态" width="150" :formatter="formatState"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" fit='true'>
            <template slot-scope="scope">
                <el-button type="text" v-show="scope.row.quesState==0" @click="updateQuesId1(scope.row)"><i class="el-icon-error"></i>设为禁用</el-button>
                <el-button type="text" v-show="scope.row.quesState==1" @click="updateQuesId0(scope.row)"><i class="el-icon-success"></i>设为启用</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增问卷的对话框 -->
    <el-dialog title="新增问卷" :visible.sync="dialogFormVisible">
      <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="80px" :model="addQues" >
        <el-form-item label="名称" prop="quesName">
          <el-input v-model="addQues.quesName"></el-input>
        </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="问卷类型" prop="quesType">
          <el-select v-model="addQues.quesType" placeholder="请选择" @input="changeQuesType">
            <el-option label="体质测评" value="1"></el-option>
            <el-option label="心理测评" value="2"></el-option>
            <el-option label="风险评估" value="3"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="测评类型" prop="quesTestType">
          <el-select v-model="addQues.quesTestType" placeholder="请选择测评类型" @input="inputTestType">
           <el-option :label="item.name" :value="item.value" v-for="item in arr" :key="item.value"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="及格分数" style="margin-top: 23px;text-align:left" prop="quesScore">
          <el-input v-model="addQues.quesScore" type="number" style="width:221.4px"></el-input>
        </el-form-item>
      </el-form>
      <!-- 题目表格 -->
      <el-table :data="addRubDetails" ref="multipleTable" border style="width: 100%;margin-top: 23px;" max-height="233" @selection-change="handleSelectionChange" tooltip-effect="dark">
        <el-table-column fixed type="selection" label="题目编号" width="50"></el-table-column>
        <el-table-column prop="rubId" label="题目编号" width="100"></el-table-column>
        <el-table-column prop="rubName" label="题目名称" width="430"></el-table-column>
        <el-table-column prop="rubGender" label="适用性别" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="80" fit='true'>
            <template slot-scope="scope">
                <el-button type="text" @click="watchRub(scope.row)">查看题目</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection(addRubDetails)">全选</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <el-dialog title="查看题目" :visible.sync="dialogFormVisible1" width="40%" append-to-body>
        <div>
          <h1>{{rub.rubName}}</h1>
          <div style="margin-top: 20px">
            <h3 v-for="(item, index) in options" :key="item.rubOpId">{{index+1 + '、' +item.rubOpName}} <el-tag type="success">{{item.rubOpScore}}分</el-tag></h3>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">关 闭</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看问卷的对话框 -->
    <el-dialog title="查看问卷" :visible.sync="outerVisible">
      <h1 style="text-align:left">问卷名称：{{ques.quesName}}</h1>
      <el-table :data="rubDetails" border style="width: 100%" max-height="250">
        <el-table-column fixed prop="rubId" label="题目编号" width="100"></el-table-column>
        <el-table-column prop="rubName" label="题目名称" width="430"></el-table-column>
        <el-table-column prop="rubGender" label="适用性别" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="80" fit='true'>
            <template slot-scope="scope">
                <el-button type="text" @click="watchRub(scope.row)">查看题目</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-dialog title="查看题目" :visible.sync="dialogFormVisible1" width="40%" append-to-body>
        <div>
          <h1>{{rub.rubName}}</h1>
          <div style="margin-top: 20px">
            <h3 v-for="(item, index) in options" :key="item.rubOpId">{{index+1 + '、' +item.rubOpName}} <el-tag type="success">{{item.rubOpScore}}分</el-tag></h3>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">关 闭</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Question',
  data () {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      quesName: '', // 条件
      quesId: '', // 条件
      quesType: '', // 条件
      ques: {},
      rub: {},
      options: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      outerVisible: false,
      formLabelWidth: '120px',
      addQues: {quesTestType: ''}, // 添加的对象
      arr: [], // 改变事件的测试类型数组
      rubDetails: [], // 查看问卷的题目数组
      addRubDetails: [], // 添加问卷的题目的数组
      addSelect: [], // 存选中题目ID的数组
      flag: true, // 显示隐藏属性
      rubTypeName: '', // 选择的类型
      byTestTypeQuestions: [], // 按类型查
      rubTypes: [
        {name: '平和质', value: 1, type: 'primary'},
        {name: '气虚质', value: 2, type: 'primary'},
        {name: '阳虚质', value: 3, type: 'primary'},
        {name: '阴虚质', value: 4, type: 'primary'},
        {name: '痰湿质', value: 5, type: 'primary'},
        {name: '湿热质', value: 6, type: 'primary'},
        {name: '血瘀质', value: 7, type: 'primary'},
        {name: '气郁质', value: 8, type: 'primary'},
        {name: '特禀质', value: 9, type: 'primary'},
        {name: '躯体化', value: 10, type: 'success'},
        {name: '强迫症化', value: 11, type: 'success'},
        {name: '人际关系敏感', value: 12, type: 'success'},
        {name: '犹豫', value: 13, type: 'success'},
        {name: '焦虑', value: 14, type: 'success'},
        {name: '敌对', value: 15, type: 'success'},
        {name: '恐怖', value: 16, type: 'success'},
        {name: '偏执', value: 17, type: 'success'},
        {name: '精神病性', value: 18, type: 'success'},
        {name: '膳食情况', value: 19, type: 'warning'},
        {name: '体力活动', value: 20, type: 'warning'},
        {name: '吸烟情况', value: 21, type: 'warning'}
      ],
      rules: {
        quesName: [
          { required: true, message: '请输入问卷名称', trigger: 'blur' }
        ],
        quesType: [
          { required: true, message: '请选择问卷类型', trigger: 'change' }
        ],
        quesTestType: [
          { required: true, message: '请选择测评类型', trigger: 'change' }
        ],
        quesScore: [
          { required: true, message: '请输入及格分数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 加载题库的方法
    initQues () {
      this.$axios.post(`/api/DHQuestionController/initQues?pageNum=${this.currentPage}&pageSize=${this.pageSize}&quesName=${this.quesName}&quesId=${this.quesId}&quesType=${this.quesType}`).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    // 格式化类型
    formatterType (row, column, cellValue, index) {
      return row.quesType === 1 ? '体质测评' : row.quesType === 2 ? '心理测评' : row.quesType === 3 ? '风险评估' : '未知'
    },
    // 格式化测试类型
    formatterT (row, column, cellValue, index) {
      for (let i = 0; i < this.rubTypes.length; i++) {
        if (this.rubTypes[i]['value'] === row.quesTestType) {
          return this.rubTypes[i].name
        }
      }
      return '未知'
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      return row.quesState === 0 ? '启用中' : row.quesState === 1 ? '未启用' : '未知'
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.initQues()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.initQues()
    },
    // 查询按钮
    search () {
      this.currentPage = 1
      this.initQues()
    },
    // 清空条件
    clearCondition () {
      this.quesName = ''
      this.quesId = ''
      this.quesType = ''
    },
    // 查看问卷
    watchQues (row) {
      this.ques = row
      this.$axios.post(`/api/DHQuestionController/watchQues?quesId=${row.quesId}`).then(({data}) => {
        this.outerVisible = true
        this.rubDetails = data
      })
    },
    // 查看题目
    watchRub (row) {
      this.dialogFormVisible1 = true
      this.rub = row
      this.$axios.post(`/api/DHRubricController/watchRub/${row.rubId}`).then(({data}) => {
        this.options = data
      })
    },
    // 删除的方法
    delQues (quesId) {
      this.$confirm('此操作将删除该问卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/DHQuestionController/updateQuesId?quesId=${quesId}&quesState=2`).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initQues()
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 改变事件
    changeQuesType () {
      this.addQues.quesTestType = ''
      if (this.addQues.quesType === '1') {
        this.arr = [
          {name: '平和质', value: 1},
          {name: '气虚质', value: 2},
          {name: '阳虚质', value: 3},
          {name: '阴虚质', value: 4},
          {name: '痰湿质', value: 5},
          {name: '湿热质', value: 6},
          {name: '血瘀质', value: 7},
          {name: '气郁质', value: 8},
          {name: '特禀质', value: 9}
        ]
      } else if (this.addQues.quesType === '2') {
        this.arr = [
          {name: '躯体化', value: 10},
          {name: '强迫症化', value: 11},
          {name: '人际关系敏感', value: 12},
          {name: '犹豫', value: 13},
          {name: '焦虑', value: 14},
          {name: '敌对', value: 15},
          {name: '恐怖', value: 16},
          {name: '偏执', value: 17},
          {name: '精神病性', value: 18}
        ]
      } else if (this.addQues.quesType === '3') {
        this.arr = [
          {name: '膳食情况', value: 19},
          {name: '体力活动', value: 20},
          {name: '吸烟情况', value: 21}
        ]
      } else {
        this.arr = []
      }
      this.inputTestType()
    },
    // 选择的选项
    handleSelectionChange (val) {
      this.addSelect = []
      val.forEach(item => {
        this.addSelect.push(item.rubId)
      })
    },
    // 全选和取消
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 表格数据改变的方法
    inputTestType () {
      if (this.addQues.quesTestType !== '') {
        this.$axios.post(`/api/DHQuestionController/findByTestType?quesTestType=${this.addQues.quesTestType}`).then(({data}) => {
          this.addRubDetails = data
        })
      } else {
        this.addRubDetails = []
      }
    },
    // 提交添加的方法
    submitAdd () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.addSelect.length === 0) {
            this.$message.error('请选择题目再提交')
          } else {
            this.$confirm('确认提交该问卷吗, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.addQues.quesState = 1
              this.$axios.post(`/api/DHQuestionController/addQues?questionDetails=${this.addSelect}`, this.addQues).then(result => {
                this.dialogFormVisible = false
                this.addQues = {quesTestType: ''}
                this.rub = {}
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
                this.initQues()
              })
            }).catch(() => {
              this.$message('已取消提交')
            })
          }
        } else {
          return false
        }
      })
    },
    // 点击根据类型查看各种问卷详情
    clickRubType (value) {
      for (let i = 0; i < this.rubTypes.length; i++) {
        if (this.rubTypes[i]['value'] === value) {
          this.rubTypeName = this.rubTypes[i].name
        }
      }
      this.flag = false
      this.$axios.post(`/api/DHQuestionController/clickRubType?quesTestType=${value}`).then(({data}) => {
        this.byTestTypeQuestions = data
      })
    },
    // 设为禁用
    updateQuesId1 (row) {
      this.$confirm('确定要禁用该问卷吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/DHQuestionController/updateQuesId?quesId=${row.quesId}&quesState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '禁用成功!'
          })
          this.clickRubType(row.quesTestType)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        })
      })
    },
    // 返回
    goBack () {
      this.flag = true
      this.initQues()
    },
    // 修改启用状态的方法
    updateQuesId0 (row) {
      let index = 0
      this.byTestTypeQuestions.forEach((e, i) => {
        if (e.quesState === 0) {
          index++
        }
      })
      if (index >= 1) {
        this.$message.error('错误提示！该测评已经有问卷启用，若需要启用该问卷，请先禁用已启用的同类型测评问卷')
      } else {
        this.$confirm('确定要将此问卷作为 <font color="red" size="3">' + this.rubTypeName + '</font> 的测评问卷吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          this.$axios.put(`/api/DHQuestionController/updateQuesId?quesId=${row.quesId}&quesState=0`).then(result => {
            this.$message({
              type: 'success',
              message: '启用成功!'
            })
            this.clickRubType(row.quesTestType)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启用'
          })
        })
      }
    }
  },
  created () {
    this.initQues()
  }
}
</script>
<style>
</style>
